<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
    <script src="../lib//three/three.js"></script>
    <script src="../lib//three/OBJLoader.js"></script>
    <script src="../lib//three/MTLLoader.js"></script>
    <script src="../lib//three/OBJMTLLoader.js"></script>
<!--    轨迹球控件-->
    <script src="../lib//three/TrackballControls.js"></script>
<!--    第一人称控件-->
    <script src="../lib//three/FirstPersonControls.js"></script>
    <!--    飞行控件-->
    <script src="../lib//three/FlyControls.js"></script>
    <!--    翻滚控件-->
    <script src="../lib//three/RollControls.js"></script>
    <!--    轨道控件-->
    <script src="../lib//three/OrbitControls.js"></script>

</head>
<body>

</body>
</html>
<script>
    const clock = new THREE.Clock()
    // 创建一个场景
    const scene = new THREE.Scene()
    // 创建一个相机 视点
    const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
    // 设置相机的位置
    camera.position.set(100, 100, 0)
    camera.lookAt(new THREE.Vector3(0,0,0))
    // 轨迹球
    // const trackball = new THREE.TrackballControls(camera)
    // 第一人称
    // const controls = new THREE.FirstPersonControls(camera)
    // controls.lookSpeed=0.2
    // 飞行控件
    // const controls = new THREE.FlyControls(camera)
    // controls.rollSpeed = 0.4
    // 翻滚控件
    // const controls = new THREE.RollControls(camera)
    // 轨道控件
    const controls = new THREE.OrbitControls(camera)
    // 创建一个渲染器
    const renderer = new THREE.WebGLRenderer()
    // 设置渲染器尺寸
    renderer.setSize(window.innerWidth, window.innerHeight)
    document.body.appendChild(renderer.domElement)

    // 添加灯光
    const spotLight = new THREE.SpotLight(0xffffff)
    spotLight.position.set(2000, 8000, 4000)
    scene.add(spotLight)
    const loader = new THREE.OBJMTLLoader()
    loader.load('../assets/models/city.obj','../assets/models/city.mtl',(mesh)=>{
        scene.add(mesh)
    })
    const animation = () => {
        controls.update(clock.getDelta())
        renderer.render(scene, camera)
        requestAnimationFrame(animation)
    }
    animation()
</script>